<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>1-1</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<script type="text/javascript">
    // $(document).ready(function() {
    //  alert('Hello World!');
    // });

    // $().ready(function() {
    //  alert('one');
    // });

    // $(function() {
    //  alert('two');
    // });

    $(document).ready(function() {
        $('.has_children').click(function() {
            $(this).addClass('highlight').children('a').show().end()

            .siblings().removeClass('highlight').children('a').hide();
        });

        $('a').click(function() {
            $(this).css('background', '#CCCCCC');
        });
    });

</script>

<style type="text/css">
    #menu {
        width: 1000px;
    }

    .has_children {
        background: #555555;
        cursor: pointer;
        width: 300px;
        display: inline-block;
        border: 2px solid #CCCCCC;
    }

    .highlight {
        background: green;
    }

    div {
        margin: 0px;
        padding: 0px;
    }

    div a {
        background: #FFFFFF;
        display: none;
        float: left;
        width: 300px;
    }

    div a:hover {
        background: #888888;
    }

</style>
</head>
<body>
    <div id="menu">
        <div class="has_children">
            <span>第一章</span>
            <a href="javascript:void(0)">1-1</a>
            <a href="javascript:void(0)">1-2</a>
            <a href="javascript:void(0)">1-3</a>
            <a href="javascript:void(0)">1-4</a>
            <a href="javascript:void(0)">1-5</a>
            <a href="javascript:void(0)">1-6</a>
            <a href="javascript:void(0)">1-7</a>
        </div>
        <div class="has_children">
            <span>第二章</span>
            <a href="javascript:void(0)">2-1</a>
            <a href="javascript:void(0)">2-2</a>
            <a href="javascript:void(0)">2-3</a>
        </div>
        <div class="has_children">
            <span>第三章</span>
            <a href="javascript:void(0)">3-1</a>
            <a href="javascript:void(0)">3-2</a>
            <a href="javascript:void(0)">3-3</a>
        </div>
    </div>
</body>
</html>
